<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    
<%@ page import="edu.itla.medifacil.persistence.entities.*" %>
<%@ page import="java.util.List" %>

<% if( request.getSession().getAttribute("appointments") == null ) response.sendRedirect("/MediFacil/Appointments.do"); %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" />
	
	<link rel="stylesheet" href="../css/style.css" />
	<link rel="stylesheet" href="../css/fullcalendar.css" />
	<link rel="stylesheet" href="../css/fullcalendar.print.css" media="print" />
	
<!-- Google Libraries API: JQuery, JQuery UI -->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
	
	<script type="text/javascript" src="../js/calendar/fullcalendar.min.js"></script>
	
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
	<script type="text/javascript" src="../js/forms/utilities.js"></script>
	
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Citas</title>
	
	<script type="text/javascript">

	<% 
	if( request.getSession().getAttribute("appointments") != null  ){
		List<Appointment> appointments = (List<Appointment>)request.getSession().getAttribute("appointments");
		out.println("var listEvents = [");
		for(Appointment appointment : appointments){
			int year = appointment.getDate().getYear()+1900;
			int month = appointment.getDate().getMonth()-1;
			int day = appointment.getDate().getDate();
			int minutes = appointment.getDate().getMinutes();
			int hours = appointment.getDate().getHours();
			
			out.println("{");
			out.println("id:"+appointment.getId()+",");
			out.println("doctor_id:"+appointment.getDoctor().getId()+",");
			out.println("patient_id:"+appointment.getPatient().getId()+",");
			out.println("title:'"+appointment.getPatient().getName()+" "+appointment.getPatient().getLastName()+"'.substr(0,14)+'...',");
			out.println("issue:'"+appointment.getIssue()+"',");
			out.println("day:"+day+",");
			out.println("month:"+month+",");
			out.println("year:"+year+",");
			out.println("hour:"+hours+",");
			out.println("minute:"+minutes +",");
			out.println("allDay:false,");
			out.println("start:new Date("+year+","+month+","+day+","+hours+","+minutes+"),");
			out.println("},");
		}
		out.println("{}];");
	}
	%>
	</script>
	<script type="text/javascript" src="../js/appointments/index.js"></script>
</head>
<body>
	<jsp:include page="../navigation/header.jsp" >
		<jsp:param value="appointments" name="active"/>
	</jsp:include>

	<div id="container">
		<div id='calendar'></div>
		
		<div title="Cita" class="dialog" id="addAppointment">
			<form id="appointmentForm" action="/MediFacil/Appointments.do" method="POST">
				<input type="hidden" name="action" value="save"/>
				<input type="hidden" name="date" id="date"/>
				<input type="hidden" id="id" name="id" />
				
				<div class="input select required">
					<label for="doctor">Doctor</label>
					<select id="doctor" name="doctorId">
						<% for( People doctor : (List<People>)request.getSession().getAttribute("doctors") ){ %>
							<option value="<%= doctor.getId() %>"><%= doctor.getName() + " " + doctor.getLastName() %></option>
						<% } %>
					</select>
				</div>
				
				<div class="input select required">
					<label for="patient">Paciente</label>
					<select id="patient" name="patientId">
						<% for( People patient : (List<People>)request.getSession().getAttribute("patients") ){ %>
							<option value="<%= patient.getId() %>"><%= patient.getName() + " " + patient.getLastName() %></option>
						<% } %>
					</select>
				</div>
				
				<div class="input select required">
					<label class="floatL" for="hour">Hora</label>
					<select class="floatL" id="hour" name="hour">
						<% for( int hour=0; hour<24; ++hour ){ %>
							<option value="<%= hour %>"><%if(hour<10){%>0<%}%><%= hour %></option>
						<%} %>
					</select>:
					<select class="floatL" id="minutes" name="hour">
						<% for( int minute=0; minute<60; ++minute ){ %>
							<option value="<%= minute %>"><%if(minute<10){%>0<%}%><%= minute %></option>
						<%} %>
					</select>
				</div>
				
				<div class="input select textarea required">
					<label for="issue">Asunto</label>
					<textarea id="issue" name="issue"></textarea>
				</div>
				
				<button type="submit">Salvar</button>
			</form>
		</div>
	</div>
	
	<jsp:include page="../navigation/copyright.html" />
	
</body>
</html>